<template>
	<view class="">
		<!-- 轮播图 -->
		<view class="border">
			<u-swiper :list="list" height=380 border-radius="0" @click='btnSwiper'></u-swiper>
		</view>
		<!-- //轮播图 -->

		<view class="mt30 ">
			<!-- 宫格导航 -->
			<view class="flex flex-wrap u-border-bottom pb30 pl48 pr48">
				<view v-for="(item,i) in gridList" :key='i' class="text-center" style="width: 20%;" :class="{'mr42': i == 0 || i %3 != 0}" @click="toList(item)">
					<view class="flex1 flex row-column col-center">
						<image :src="item.pic" class="w90 h90 ml10 radius100"></image>
						<view class="mt10">{{item.title}}</view>
					</view>
				</view>
			</view>
			<!-- //宫格导航 -->
			
			<view class="pl48 pr48">
				<notice :from='1'></notice>
			</view>
		</view>

		<view class=" u-border">
			<u-tabs :list="tablist" :is-scroll="false" :current="tabIndex" @change="change" :show-bar='false' active-color='#D23030'></u-tabs>
		</view>
		
		<!-- 评论 -->
		<view class="ml30 mt30 mr30 flex" v-for="(item,index) in dataList" :key="index" @click="toDetail(item)">
			<!-- 头像 -->
			<view class="" v-if="item.shop">
				<image :src="item.shop.avatar" class="w70 h70 radius70 mr20" v-if="item.shop.avatar"></image>
			</view>
				
			<!-- 右边 -->
			<view class="flex1 pb20 u-border-bottom">
				<!-- 上面 -->
				<view class="flex row-between mb20">
					<text class="fs28" v-if="item.shop">{{item.shop.name}}</text>
					<text class="fs24 color9">{{item.create_time}}</text>
				</view>
				<!-- 中间 -->
				<view class="fs28 mb20">{{item.name}}</view>
				<view :class="['flex flex-wrap',
				item.images.length==2||item.images.length==4?'row-between' :'']" >
					<image :src="i" v-for="(i,j) in item.images" :key="j+'a'" :class="['radius16 mt10 friendPic',item.images.length==1?'onePic':'',
					item.images.length==2?'twoPic':'',
					item.images.length==3?'threePic':'',
					item.images.length==4?'fourPic':'',
					item.images.length>=5?'threePic':'',]" v-if="i" mode="aspectFill" @click.stop="previewImage(j,item)"></image>
				</view>
				<view class="flex row-right color9 fs24 mt30 col-center">
					<view class="mr50 flex col-center">
						<text class="cuIcon-attention fs40"></text>
						<text class="fs28">{{item.browse}}</text>
					</view>
					<view class="mr50 fs28" v-if="item.comment>0">
						<text >评论</text>
						<text>{{item.comment}}</text>
					</view>
					<view class="fs28">
						<u-icon name="thumb-up" v-if="item.is_give == 0" size="35"></u-icon>
						<u-icon name="thumb-up-fill" v-else color="#D23030" size="35"></u-icon>
						<text>{{item.give}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- //评论 -->
		
		<!-- 修改图标 -->
		<view class="editimg">
			<image src="../../static/image/index/edit.png" class="w100 h100 radius100" @click="toReportPage"></image>
		</view>
	</view>
</template>

<script>
	import notice from '@/components/notice/index.vue'
	export default {
		name:"friend",
		components: {notice},
		data() {
			return {
				list: [],
				gridList: [],
				tablist: [{
					name: '当前热帖'
				}, {
					name: '当前新帖'
				}],
				tabIndex: 0,
				shopType: '',
				dataList: [],
				page: 1
			};
		},
		onShow() {
			this.getData()
			this.getCircleIndex()
		},
		methods: {
			toReportPage () {
				// if (this.shopType != 1) {
				// 	this.$tool.msg('只有商家才可以发布朋友圈')
				// 	return;
				// }
				uni.navigateTo({
					url: '/pages/friend/report'
				})
			},
			toList (item) {
				uni.navigateTo({
					url: `/pages/friend/list?id=${item.id}&title=${item.title}`
				})
			},
			toDetail (item) {
				uni.navigateTo({
					url: '/pages/friend/detail?id='+item.id
				})
			},
			getData () {
				// 获取轮播图
				this.$api.circle_index().then(res => {
					this.list = res.data.map(item => {
						item.image = item.pic
						return item
					})
				})
				// 获取轮播图下方分类
				this.$api.circleCategory().then(res => {
					this.gridList = res.data
				})
				// 当前店铺信息，判断是否店铺，只有店铺才能发布朋友圈
				this.$api.getShop().then(res => {
					this.shopType = res.data.data
				})
			},
			getCircleIndex () {
				// 朋友圈列表
				this.$api.circleIndex({page: this.page, type: this.tabIndex+1, size: 10}).then(res => {
					if (res.data.length > 0) {
						this.dataList = [...this.dataList,...res.data]
						this.page += 1
					}
				})
			},
			change(index) {
				this.tabIndex = index;
				this.page = 1
				this.dataList=[]
				this.getCircleIndex()
			},
			//点击轮播图
			btnSwiper(e) {
				console.log(e)
				// console.log(this.list[e].url_switch)
				if (this.list[e].url_switch == 1) {
					if (this.list[e].url_type == 'goods_detail') {
						let spu = this.list[e].params.spu
						uni.navigateTo({
							url: '/subpkg/goodsDetail/goodsDetail?spu=' + spu
						})
					} else if (this.list[e].url_type == 'shop_detail') {
						let id = this.list[e].params.id
						uni.navigateTo({
							url: '/subpkg/brandDetail/brandDetail?shop_id=' + id
						})
					} else if (this.list[e].url_type == 'goods_list') {
						let category_id = this.list[e].params.category_id.category_id
						uni.navigateTo({
							url: '/subpkg/goodsSecondLevel/goodsSecondLevel?id=' + category_id
						})
					}
				}
			},
			//朋友圈图片预览
			previewImage(j,item) {
				uni.previewImage({
					current:j,
					urls:item.images.map(i=>i)
				})
			}
		},
		onReachBottom() {
			this.page++
			this.getCircleIndex()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
.editimg {
	position: fixed;
	right: 30rpx;
	bottom: 200rpx;
}
.onePic {
	width: 100%;
	height: 380rpx !important;
}
.twoPic{
	width: 49% !important;
	height: 300rpx !important;
	margin-right: 0 !important;
}
.threePic {
	width: 32%;
	height: 180rpx !important;
}
.fourPic {
	width: 49%;
	height: 300rpx !important;
	margin-right: 0!important;
}
// 朋友圈图片
.friendPic {
	margin-right: 10rpx;
}
.friendPic:nth-child(3n+0) {
	margin-right: 0;
}
</style>
